<template>
  <div :data="homePage[0]">
    <div v-for="item in homePage" :key='item.id'>
        <el-card class="card1" >
                <el-image class="img1" :src="'http://101.43.223.224:8765/image/getImageById?id=' + imageId"></el-image>
            <div class="div1">
                <div class="div2" >
                    <p style="font-size:25px">{{item.courseTitle}}</p>
                    <p style="font-size:12px"><el-rate v-model="value1" style="float:left"></el-rate>讲师：{{item.tname}}</p>
                    <p style="font-size:27px"><span v-if="item.price"><span v-if="OrderData">已付费可学习</span><span v-if="!OrderData">¥{{item.price}}</span></span><span v-if="!item.price">免费</span></p>
                </div>
                  <el-button type="warning" style="margin-top:30px;width: 180px;height:50px" @click="tiao(item.price)"><span v-if="item.price&&!OrderData">立即购买</span><span v-if="!item.price||OrderData">立即学习</span></el-button>
            </div>
            <div class="tabs1">
                <el-button type="text" @click="jieshao()">介绍</el-button>
                <el-button type="text" @click="mulu()">目录</el-button>
            </div>
        </el-card>
        <el-card class="card2">
            <div v-show="div33">
                课程介绍
                <p>{{item.introduction}}</p>
            </div>
            <div v-show="div44" :data="homePages">
                <span style="font-size:20px;">目录</span>
                <div v-for="item in homePages" :key='item.id'>
                    <div style="background-color:rgb(246,246,246);width:100%;height: 25px;font-weight: bold;color:rgb(153,153,153);margin-top: 10px;">{{item.unitName}}</div>
                    <div :data="homePagess" v-for="item in item.joints" :key='item.id' style="margin-top:5px;color:rgb(139, 139, 139)">
                        {{item.jointIntroduction}}
                    </div>
                    <!-- <div :data="homePagess" v-for="item in homePagess" :key='item.id'>
                        {{item.jointIntroduction}}
                    </div> -->
                </div>
            </div>
        </el-card>
        <el-card class="card3">
            <div v-show="div33">
                课程介绍
                
            </div>
        </el-card>
        <el-card class="card3">
            <div v-show="div33">
                课程介绍
            </div>
        </el-card>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  name:  '',
  components: {
    
  },
  // 定义属性
  data() {
    return {
        OrderData:[],
        user:JSON.parse(window.sessionStorage.getItem('user')),
        imageId:"",
        homePage:[],
        homePages:[],
        homePagess:[],
        div33:true,
        div44:false,
        value1: null,
        activeName: 'second',
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    tiao(data){
      if(data && this.OrderData==null){
          this.$router.push({name: 'PayForOrders', query: {id: data}})
      }else{
        this.$router.push({name: 'VideoPage', query: {id: window.location.href.split("=")[1]}})
      }
      
    },
    //全查-模糊查
    getOrder() {
      this.OrderData=[]
            this.$axios
                .get("/order/getorderById", {
                    params: {
                      courseId:window.location.href.split("=")[1],
                      userId:this.user.id
                    }
                })
                .then((res) => {
                    if (res.data.code) {
                        this.OrderData = res.data.data;
                    }
                })
                .catch((err) => {
                    this.myMessage("error", err);
                });
        },
    jieshao(){
        this.div33=true;
        this.div44=false;
    },
    mulu(){
        this.div33=false;
        this.div44=true;
    },

    //获取首页精选课程
    homePageSelectedById() {
          this.$axios.get("/conrse/homePageSelectedById", {
            params: {
              id: window.location.href.substring(33,40)
            }
            }).then(res => {
                if (res.data.flag){
                    window.sessionStorage.setItem('imageId', res.data.data[0].imageId)
                    window.sessionStorage.setItem('courseTitle', res.data.data[0].courseTitle)
                    window.sessionStorage.setItem('price', res.data.data[0].price)
                    window.sessionStorage.setItem('idss', res.data.data[0].id)
                    this.homePage = res.data.data
                    this.imageId = res.data.data[0].imageId
                }
            }).catch(() => {
            })
        },
    //获取首页精选课程
    homePageUnitById() {
          this.$axios.get("/conrse/homePageUnitById", {
            params: {
              id: window.location.href.substring(33,40)
            }
            }).then(res => {
                if (res.data.flag){
                    this.homePages = res.data.data
                    this.homePagess = res.data.data.joints
                    console.log(res.data.data.joints.size)
                }
            }).catch(() => {
            })
        },
        //获取首页精选课程
    // homePageJointById() {
    //       this.$axios.get("/conrse/homePageJointById", {
    //         params: {
    //           id: this.homePages[i].id
    //         }
    //         }).then(res => {
    //             if (res.data.flag){
    //                 for(i=0;i<this.homePages.length;i++){
    //                     console.log("1"+this.homePages[i])
    //                 this.homePagess = res.data.data
    //                 }
    //             }
    //         }).catch(() => {
    //             this.$message.error('获取信息失败！')
    //         })
    //     },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this. getOrder()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
    this. homePageSelectedById()
    this. homePageUnitById()
    // this. homePageJointById()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style >
  .card1{
    margin-top:20px
  }
  .img1{
    width:450px;
    height:250px;
    float:left;
  }
  .div1{
    float:left;
    width:650px;
    height:270px;
    margin-top:-20px;
    margin-left:20px
  }
  .tabs1{
    float:left;
  }
  .card2{
    float:left;
    margin-top:20px;
    margin-bottom:20px;
    width:76%;
    height:700px
  }
  .card3{
    float:left;
    margin-top:20px;
    margin-left: 20px;
    width:22%;
    height:250px
  }
</style>